<template>
  <div class="container with-nav-padding">
    <div @click="$router.push('/mall')" class="btn-fixed to-home">商城首页</div>
    <div @click="$router.push('/cart')" class="btn-fixed to-cart"></div>
    <div class="item-viewer">
      <!-- <div class="top-info">
        <img src="@/assets/商品详情-图片-assets/x.png" alt="" />
        杨敏敏入手了一个车载吸尘器
      </div>-->
      <button @click="shareClick" class="share-btn"></button>
      <div v-if="goodInfo.commodity_video" class="bottom-btn">
        <button @click="viewerMode = 1" :class="{ 'video-btn': true, active: viewerMode === 1 }">
          <img
            v-if="viewerMode === 1"
            style="margin-right:0.2rem;"
            src="@/assets/发视频-assets/播放.png"
            alt
          />
          <span v-if="viewerMode === 1">视频</span>
        </button>
        <button @click="viewerMode = 2" :class="{ active: viewerMode === 2 }">图片</button>
      </div>
      <div v-show="viewerMode === 1" class="video">
        <video
          height="100%"
          width="100%"
          :src="goodInfo.commodity_video"
          controls="controls"
          x5-playsinline
          playsinline
          webkit-playsinline
        ></video>
      </div>
      <yd-slider
        v-show="viewerMode === 2"
        autoplay="3000"
        :show-pagination="false"
        :callback="sliderChange"
        style="height: 15rem"
      >
        <yd-slider-item v-for="(item, index) in goodInfo.commodity_img" :key="index">
          <div>
            <img style="width:100%" :src="item" :preview="goodInfo.id" preview-text="商品详情" />
          </div>
        </yd-slider-item>
      </yd-slider>
      <div
        v-if="viewerMode === 2"
        class="slider-counter"
      >{{ currentSlider }}/{{ goodInfo.commodity_img.length }}</div>
      <div class="seckill-tip" :style="{background: subColor}" v-if="$route.query.isSeckill">
        <span class="time-limit" style="white-space: nowrap">限时抢购</span>
        <span class="price" style="white-space: nowrap">￥{{goodInfo.seckill_price}}</span>
        <span class="buy-limit" style="white-space: nowrap" v-if="parseInt(goodInfo.limit_num) > 0">限购{{goodInfo.limit_num}}件</span>
        <span class="count-down" style="white-space: nowrap">{{seckillTitle}}: {{timeUpdate}}</span>
      </div>
    </div>
    <div class="item-title">
      <div class="title-cell">
        <div class="item-title">{{ goodInfo.name }}</div>
        <button @click="addFavorite">
          <img src="@/assets/商品详情-加入购物车-assets/收藏.png" alt v-if="goodInfo.is_concerns !== 1" />
          <img
            src="./../../assets/商品详情-加入购物车-assets/shoucangkecheng.png"
            v-if="goodInfo.is_concerns == 1"
            alt
          />
          {{ goodInfo.is_concerns == 1 ? "已收藏" : "收藏" }}
        </button>
      </div>
      <div class="title-cell">
        <div v-if="!isChoosen && vip_rule !== 0" class="price">
          <div v-if="goodInfo.discount_price != 0 && goodInfo.is_points !== 1" class="vip-price">
            ¥{{ goodInfo.discount_price }}
            <span class="vip-tag">VIP</span>
          </div>
          <div class="normal-price">¥{{ goodInfo.price }}</div>
          <div
            v-if="goodInfo.discount_price == 0"
            style="text-decoration: line-through;"
            class="normal-price"
          >¥{{ goodInfo.original_price }}</div>
        </div>
        <div v-if="isChoosen && vip_rule !== 0" class="price">
          <div
            v-if="!goodInfo.is_vip"
            style="text-decoration: line-through;"
            class="normal-price"
          >¥{{ choosenPrice.original_price }}</div>
          <div class="normal-price">¥{{ choosenPrice.price }}</div>
          <div
            v-if="
              goodInfo.is_vip === 1 &&
                choosenPrice.discount_price != 0 &&
                goodInfo.is_points !== 1 &&
                vip_rule !== 0
            "
            class="vip-price"
          >
            ¥{{ choosenPrice.discount_price }}
            <span class="vip-tag">VIP</span>
          </div>
        </div>
        <div v-if="vip_rule === 0" class="price">
          <div style="text-decoration: none; color:red" class="normal-price">¥{{ goodInfo.price }}</div>
          <div class="normal-price" style="font-size: 0.44rem;">¥{{ goodInfo.original_price}}</div>
          <div
            v-if="
              goodInfo.is_vip === 1 &&
                choosenPrice.discount_price != 0 &&
                goodInfo.is_points !== 1 &&
                vip_rule !== 0
            "
            class="vip-price"
          ></div>
        </div>
        <div
          v-if="goodInfo.is_vip !== 1"
          class="info"
        >已售{{ goodInfo.sold_out }}件丨剩{{ goodInfo.inventory }}件</div>
      </div>
      <div
        v-if="parseInt(goodInfo.points) !== 0"
        class="point-price"
      >{{ goodInfo.points | pointFix }}积分</div>
    </div>
    <div class="buyer-info">
      <!-- <div class="cell with-grey-bottom-border">
        <div class="header">发货</div>
        <div class="divider">|</div>
        <div class="postage">运费：{{ goodInfo.freight }}</div>
      </div>-->
      <div class="cell" v-if="!($route.query.isSpell || $route.query.isSeckill)">
        <div @click="showCouponMask = true" v-if="couponList.length" class="cell-btn">
          领券
          <img src="@/assets/发视频-assets/next.png" alt />
        </div>
        <div v-else class="cell-btn">无可用优惠券</div>
        <div class="header">优惠</div>
        <div v-if="couponList.length" style="width: calc(100% - 2.12rem - 3.2%);">
          领券至少可减
          <span class="red">￥{{ couponMinus(goodInfo.coupon) }}</span>
          <div class="coupon-list">
            <span class="coupon-header">优惠券</span>
            <span class="coupon" v-for="item in goodInfo.coupon" :key="item.id">
              满{{ item.meet.split(".")[0] }}减{{
              item.minus.split(".")[0]
              }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="service-size">
      <div class="cell with-grey-bottom-border">
        <div class="cell-btn">
          <img src="@/assets/发视频-assets/next.png" alt="" />
        </div>
        <div class="header">服务</div>
        <div @click="showPromiseMask = true" class="service">
          <img src="@/assets/商品详情-图片-assets/公众号授权.png" alt="" />
          贵就赔丨正品保障丨假一赔十丨全网低价
        </div>
      </div>
      <div @click="showChooseMask = true" class="cell">
        <div class="cell-btn">
          <img src="@/assets/发视频-assets/next.png" alt="" />
        </div>
        <div class="header">规格</div>
        <div v-if="!isChoosen" class="size">请选择颜色、尺码</div>
        <div v-else class="size">
          {{ choosenPrice.chooseStr }} ×{{ choosenPrice.number }}件
        </div>
      </div>
    </div>-->
    <div v-if="brand && Object.keys(brand).length && goodInfo.is_vip !== 1" class="brand-info">
      <img :src="brand.brand_img" alt />
      <div class="brand-name">
        <div class="name">{{ brand.en_name }}/{{ brand.zh_name }}</div>
        <!-- <div class="inventory">在售商品{{ brand.brand_number }}件</div> -->
      </div>
      <button @click="$router.push('/brand-item-list/' + goodInfo.brand.id)" class="brand-btn">品牌专柜</button>
    </div>
    <div class="cluster-wrapper" v-if="partClusterList.length">
      <div class="cluster-title">
        <p>{{ spell_total_people }}人在拼单，可直接参与</p>
      </div>
      <div v-for="(item, index) of partClusterList" :key="index">
        <detail-cluster-panel :clusterInfo="item" @shareBill="handleShareBill" />
      </div>
      <div class="unfold-alll" @click="unfoldAll" v-if="showUnfold">展开全部</div>
    </div>

    <!-- <div class="cell" style="margin-top:0.48rem;">
      <div class="cell-btn">
        <img src="@/assets/发视频-assets/next.png" alt="" />
      </div>
      <span class="notice">购物须知</span>
    </div>-->
    <div class="item-detail">
      <div ref="tabBar" :class="{ 'detail-tab': true }">
        <div @click="tab = 1" :class="{ 'nav-cell': true, active: tab === 1 }">
          <span v-if="goodInfo.is_vip !== 1" key="1" :style="{borderBottomColor: mainColor}">详情</span>
          <span v-else key="2">推广员权益</span>
        </div>
        <!-- <div @click="tab = 2" :class="{ 'nav-cell': true, active: tab === 2 }">
          <span>用户评价</span>
        </div>-->
      </div>
      <div>
        <div class="good-params">
          <div v-for="(item, index) in goodInfo.parameter" :key="index" class="params-cell">
            <div class="key" style="width: 13%">{{ item.name }}</div>
            <div class="value" style="white-space: nowrap">{{ item.detail }}</div>
          </div>
        </div>
        <div class="content" v-html="goodInfo.introduce"></div>
      </div>
      <div v-if="goodInfo.is_vip !== 1" style="margin-top:0.48rem;" :class="{ 'detail-tab': true }">
        <div @click="tab = 2" :class="{ 'nav-cell': true, active: true }">
          <span :style="{borderBottomColor: mainColor}">用户评价</span>
        </div>
      </div>
      <div v-if="goodInfo.is_vip !== 1">
        <div v-for="(item, index) in commentList" :key="index" class="comment-cell">
          <div class="top-bar">
            <div class="left">
              <img :src="item.avatar" alt />
              <div class="user-info">
                <div class="username">{{ item.nickname }}</div>
                <div class="time">{{ item.created_at.split(" ")[0] }}</div>
              </div>
            </div>
            <div class="right">
              <img
                v-for="(item, oIndex) in item.level"
                src="@/assets/商品详情-图片-assets/星.png"
                :key="oIndex"
              />
              <img
                v-for="(item, findex) in 5 - item.level"
                :key="findex"
                src="@/assets/商品详情-加入购物车-assets/收藏.png"
                alt
              />
              <!-- {{ item.level }} -->
            </div>
          </div>
          <div class="comment">{{ item.evaluate_info }}</div>
          <div class="comment-img">
            <div v-for="(img, qindex) in item.links" :key="qindex" class="img">
              <img :src="img" alt />
            </div>
          </div>
          <div class="reply">
            <div class="title">卖家回复：</div>
            <div class="content">{{ item.reply }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="vip-notice" v-if="vipNotice === true" @touchmove.prevent>
      <div class="notice-panel">
        <div class="img"></div>
        <div class="main-text" v-if="vip_rule !== 0">购买会员礼包，成为会员</div>
        <div class="main-text" v-if="vip_rule === 0">购买任意商品可享受分佣权益</div>
        <div class="sub-text">分享商品给好友可获得佣金</div>
        <button
          v-if="vip_rule !== 0"
          @click="$router.push('/vip')"
          :style="{background: mainColor}"
        >购买会员礼包</button>
        <button
          v-if="vip_rule === 0"
          @click="$router.push('/mall')"
          :style="{background: mainColor}"
        >立即购买</button>
      </div>
      <button @click="vipNotice = false" class="close"></button>
    </div>
    <div class="bottom-bar" :class="{ 'fullscreen-bottom-style': isFullscreen }">
      <button
        v-if="goodInfo.is_serve === 0 && goodInfo.is_vip === 0"
        @click="addToCart"
        class="cart-btn"
      >
        <div class="dot">+</div>
        <img src="@/assets/商品详情-图片-assets/购物车.png" alt />
        <div>购物车</div>
      </button>
      <button
        @click="buy"
        class="buy"
        :style="{background: subColor}"
        v-if="!$route.query.isSpell"
      >立即购买</button>
      <button
        @click="shareHandle"
        class="share"
        :style="{background: mainColor}"
        v-if="!$route.query.isSpell"
      >推荐返现</button>
      <div class="cluster-btn" v-if="$route.query.isSpell" :class="{'serveCls': goodInfo.is_serve !== 0}">
        <button
          class="original-buy"
          :style="{background: subColor}"
          v-if="goodInfo.spell_price"
          @click="buy"
        >原价购买￥{{parseInt(goodInfo.price)}}</button>
        <button
          class="sponsor-buy"
          @click="clusterBuy"
          :style="{background: mainColor}"
          v-if="goodInfo.spell_price"
        >发起拼团￥{{parseInt(goodInfo.spell_price)}}</button>
      </div>
    </div>
    <div v-if="arrowMask" @click.stop="arrowMask = false" class="arrow-mask">
      <img src="@/assets/商品分享-引导-assets/0.png" alt />
    </div>
    <share-mask
      v-if="showShareMask"
      @panelClose="showShareMask = false"
      @qrCode="showQrCode = true"
      @wxShare="wxShare"
    ></share-mask>
    <qrcode :goodInfo="goodInfo" v-if="showQrCode" @qrcodeClose="showQrCode = false"></qrcode>
    <coupon-mask
      v-if="showCouponMask"
      @panelClose="showCouponMask = false"
      :couponList="goodInfo.coupon"
    ></coupon-mask>
    <promise
      :content="goodInfo.promise"
      v-if="showPromiseMask"
      @panelClose="showPromiseMask = false"
    ></promise>
    <choose-mask
      v-if="showChooseMask"
      @panelClose="showChooseMask = false"
      @goodChoose="goodChoose"
      :spec="goodInfo.spec"
      :goodInfo="goodInfo"
      :img="goodInfo.commodity_img[0]"
      :outterChoose="choosenPrice.choose"
      :isClusterBuyClick="isClusterBuyClick"
      :isSeckillClick="isSeckillClick"
      :willTime="willTime"
    ></choose-mask>
  </div>
</template>

<script>
import {
  getGoodsDetail,
  goodFavorite,
  getGoodComment,
  addToCart,
  getIntegral
} from "@/api/mall";
import { getDetailClusterList } from "@/api/seckill";
import shareMask from "./component/share-mask.vue";
import qrcode from "./component/qrcode.vue";
import couponMask from "./component/coupon-mask.vue";
import promise from "./component/promise.vue";
import chooseMask from "./component/choose-mask.vue";
import DetailClusterPanel from "./component/detail-cluster-panel";
import { mapState } from "vuex";
import wx from "weixin-js-sdk";
import { getWXSDK } from "@/api/wx";
const ERR_OK = 200;
export default {
  data() {
    return {
      seckillTitle: '距结束',
      viewerMode: 1,
      tab: 1,
      tabFixed: false,
      isVip: false,
      vipNotice: false,
      showShareMask: false,
      showQrCode: false,
      showCouponMask: false,
      showPromiseMask: false,
      showChooseMask: false,
      goodInfo: {},
      tabScrollTop: null,
      brand: null,
      couponList: [],
      chooseMode: 1, //1为直接选择规格，2 选择规格后加入购物车 3选择规格后直接购买
      isChoosen: false,
      choosenPrice: {
        chooseStr: "",
        discount_price: "",
        original_price: "",
        price: "",
        choose: {},
        spec: "",
        number: "",
        spec_id: ""
      },
      currentSlider: 1,
      commentList: [],
      arrowMask: false,
      imgList: [],
      options: {
        isClickableElement: function(el) {
          return /previewer-delete-icon/.test(el.className);
        }
      },
      timer: null,
      timeUpdate: "",
      clusterList: [],
      partClusterList: [],
      showUnfold: true,
      spell_total_people: 0,
      isClusterBuyClick: false,
      isSeckillClick: false,
      willTime: 0
    };
  },
  computed: {
    ...mapState({
      level: state => state.user.level,
      entryUrl: state => state.app.entryUrl,
      isFullscreen: state => state.app.isFullscreen,
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor,
      vip_rule: state => state.app.vip_rule
    })
  },
  destroyed() {
    this.timer && clearInterval(this.timer);
  },
  methods: {
    handleShareBill(clusterInfo) {
      this.$router.push({
            path: "/payment",
            query: {
              id: clusterInfo.commodity_id,
              spec: clusterInfo.spec,
              number: clusterInfo.num,
              type: "pay",
              isSpell: 1,
              active_team_id: clusterInfo.id
            }
      })
    },
    unfoldAll() {
      this.partClusterList = this.clusterList;
      this.showUnfold = false;
      this.$dialog.toast({
        mes: "已展开全部拼团"
      });
    },
    calcuSeckillEnd(obj) {
      
      let hour, minute, second;
      if (obj.end_time) {

        let now_time = new Date().getTime() / 1000;
        let willTime = obj.start_time - now_time
        
        let duration = obj.end_time - now_time;
        if (duration <= 0) return '已结束'
        if (willTime > 0) {
          duration = willTime
          this.willTime = willTime
          this.seckillTitle = '距开始'
        }
        hour = Math.floor(duration / 3600);
        minute = Math.floor((duration % 3600) / 60);
        second = Math.floor((duration % 3600) % 60);
        hour = hour >= 10 ? hour : "0" + hour;
        minute = minute >= 10 ? minute : "0" + minute;
        second = second >= 10 ? second : "0" + second;
      }
      this.timeUpdate = hour + "小时" + minute + "分" + second + "秒";
    },
    shareClick() {
      let id = this.goodInfo.id;
      let img = this.goodInfo.commodity_img[0];
      let name = this.goodInfo.name;
      let me = this;
      let goodsInfo = JSON.stringify({ id, img, name });
      wx.miniProgram.getEnv(res => {
        if (res.miniprogram) {
          wx.miniProgram.navigateTo({
            url: `/pages/share/share?goodsInfo=${goodsInfo}`
          });
        } else {
          me.showShareMask = true;
        }
      });
    },
    show(index) {
      this.$refs.previewer.show(index);
    },
    wxShare(type) {
      this.arrowMask = true;
    },
    couponMinus(list) {
      let minus = 0;
      list.forEach(item => {
        if (-item.minus < -minus) minus = item.minus;
      });
      return minus;
    },
    goodChoose(val) {
      if (val.isChoosen) {
        this.isChoosen = true;
        this.choosenPrice.chooseStr = val.chooseStr;
        this.choosenPrice.discount_price = val.discount_price;
        this.choosenPrice.original_price = val.original_price;
        this.choosenPrice.price = val.price;
        this.choosenPrice.choose = val.choose;
        this.choosenPrice.spec = val.spec;
        this.choosenPrice.number = val.number;
        this.choosenPrice.spec_id = val.spec_id;
        this.choosenPrice.points = val.points;
      } else {
        this.isChoosen = false;
        this.choosenPrice = {
          chooseStr: "",
          discount_price: "",
          original_price: "",
          price: "",
          choose: {},
          spec: "",
          nubmer: "",
          spec_id: "",
          points: ""
        };
      }
    },
    addToCart() {
      if (this.isChoosen) {
        addToCart({
          id: this.goodInfo.id,
          spu_id: this.choosenPrice.spec_id,
          number: this.choosenPrice.number
        }).then(res => {
          if (res.status === 200) {
            this.$dialog.toast({
              mes: "添加成功",
              timeout: 1500,
              icon: "success"
            });
            this.goodChoose({ isChoosen: false });
          }
        });
      } else {
        this.showChooseMask = true;
      }
    },
    clusterBuy() {
      if (this.isChoosen) {
        this.$router.push({
          path: "/payment",
          query: {
            id: this.goodInfo.id,
            spec: this.choosenPrice.spec,
            number: this.choosenPrice.number,
            type: "pay"
          }
        });
      } else {
        this.showChooseMask = true;
        this.isClusterBuyClick = true
      }
    },
    buy() {
      if (this.isChoosen) {
        this.$router.push({
          path: "/payment",
          query: {
            id: this.goodInfo.id,
            spec: this.choosenPrice.spec,
            number: this.choosenPrice.number,
            type: "pay"
          }
        });
      } else {
        if (this.$route.query.isSeckill) {
          this.isSeckillClick = true
        } else {
          this.isSeckillClick = false
        }
        this.showChooseMask = true;
      }
    },
    sliderChange(page) {
      this.currentSlider = page - -1;
    },
    handleScroll() {
      let scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      this.tabFixed = scrollTop >= this.tabScrollTop ? true : false;
    },
    shareHandle() {
      let id = this.goodInfo.id;
      let img = this.goodInfo.commodity_img[0];
      let name = this.goodInfo.name;
      let me = this;
      let goodsInfo = JSON.stringify({ id, img, name });

      if (this.level === 0) {
        this.vipNotice = true;
      } else {
        wx.miniProgram.getEnv(res => {
          if (res.miniprogram) {
            wx.miniProgram.navigateTo({
              url: `/pages/share/share?goodsInfo=${goodsInfo}`
            });
          } else {
            me.showShareMask = true;
          }
        });
      }
    },
    addFavorite() {
      goodFavorite({ id: this.goodInfo.id }).then(res => {
        if (res.status === 200) {
          if (res.data.data.type === 1) {
            this.goodInfo.is_concerns = 1;
          } else {
            this.goodInfo.is_concerns = 2;
          }
          this.$dialog.toast({
            mes: res.data.data.massage,
            timeout: 1500,
            icon: "success"
          });
        }
      });
    },
    onShare() {
      let _this = this;
      let title = this.goodInfo.name;
      let desc = this.goodInfo.name;
      let imgUrl = this.goodInfo.commodity_img[0];
      let link =
        window.location.href.split("#")[0] +
        "static/redirect.html?app3Redirect=" +
        encodeURIComponent(
          window.location.href.split("#")[0] +
            "#" +
            window.location.href.split("#")[1].split("?")[0] +
            "?invite_code=" +
            this.goodInfo.invite_code
        );
      wx.onMenuShareAppMessage({
        title, // 分享标题
        desc, // 分享描述
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl, // 分享图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
        success: res => {
          _this.arrowMask = false;
          this.$dialog.toast({
            mes: "分享成功",
            timeout: 1500,
            icon: "success"
          }); // 用户确认分享后执行的回调函数
          // console.log("分享给朋友成功返回的信息为:", res);
        },
        cancel: function(res) {
          _this.arrowMask = false;
          // 用户取消分享后执行的回调函数
          // console.log("取消分享给朋友返回的信息为:", res);
        }
      });

      //分享到朋友圈
      wx.onMenuShareTimeline({
        title, // 分享标题
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl, // 分享图标
        success: function(res) {
          _this.arrowMask = false;
          // 用户确认分享后执行的回调函数
          // console.log("分享到朋友圈成功返回的信息为:", res);
        },
        cancel: function(res) {
          _this.arrowMask = false;
          // 用户取消分享后执行的回调函数
          // console.log("取消分享到朋友圈返回的信息为:", res);
        }
      });
    }
  },
  created() {
    if (this.$route.query.isSpell) {
      getDetailClusterList(this.$route.params.itemId)
        .then(res => {
          if (res.data.code === ERR_OK) {
            this.clusterList = res.data.data.list;
            this.spell_total_people = res.data.data.spell_total_people;
            this.partClusterList = res.data.data.list.slice(0, 3);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }

    getGoodsDetail({
      id: this.$route.params.itemId,
      invite_code: this.$route.query.invite_code,
      isSeckill: this.$route.query.isSeckill,
      isSpell: this.$route.query.isSpell
    }).then(res => {
      if (res.status === 200) {
        this.goodInfo = res.data.data;
        this.brand = res.data.data.brand;
        this.couponList = res.data.data.coupon;
        this.imgList = this.goodInfo.commodity_img.map(item => {
          return { src: item };
        });
        if (!this.goodInfo.commodity_video) this.viewerMode = 2;
        getGoodComment({ page: 1, item_no: this.goodInfo.item_no }).then(
          res => {
            if (res.status === 200) {
              this.commentList = res.data.data;
            }
          }
        );
        if (this.isMiniProgram) {
          let postData = {
            url:
              window.location.href.split("#")[0] +
              "static/redirect.html?app3Redirect=" +
              encodeURIComponent(
                window.location.href.split("#")[0] +
                  "#" +
                  window.location.href.split("#")[1].split("?")[0] +
                  "?invite_code=" +
                  this.goodInfo.invite_code
              ),
            title: this.goodInfo.name
          };
          wx.miniProgram.postMessage({ data: JSON.stringify(postData) });
        }
        //解决ios 签名失效问题
        let signLink = /(Android)/i.test(navigator.userAgent)
          ? location.href.split("#")[0]
          : this.entryUrl;
        getWXSDK({ shareurl: signLink }).then(res => {
          if (res.status === 200) {
            // console.log(res.data.data);
            let data = res.data.data;
            wx.config({
              debug: false,
              appId: data.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature, // 必填，签名，见附录1
              jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"]
            });
            //处理验证失败的信息
            wx.error(function(res) {
              // console.log("验证失败返回的信息:", res);
            });
            //处理验证成功的信息
            wx.ready(() => {
              // console.log("验证完成");
              this.onShare();
            });
          }
        });
        // 分享商品
        if (this.$route.query.invite_code) {
          let invite_code = this.$route.query.invite_code;
          getIntegral(this.goodInfo.id, invite_code).then(res => {
            this.$dialog.toast({
              mes: res.data.message
            });
          });
        }
        // 秒杀剩余时间
        this.calcuSeckillEnd(this.goodInfo);
        this.timer = setInterval(() => {
          this.calcuSeckillEnd(this.goodInfo);
        }, 1000);
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    if (to.path.indexOf("/main-login") !== -1 && !to.query.invite_code) {
      next(false);
      this.$router.push({
        path: "/main-login",
        query: {
          invite_code: this.$route.query.invite_code,
          good_id: this.$route.params.itemId
        }
      });
    } else {
      next();
    }
  },
  mounted() {
    this.tabScrollTop = this.$refs.tabBar.offsetTop;
    setTimeout(() => {
      this.tabScrollTop = this.$refs.tabBar.offsetTop;
    }, 1500);
    window.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  components: {
    shareMask,
    qrcode,
    couponMask,
    promise,
    chooseMask,
    DetailClusterPanel
  }
};
</script>

<style lang="less" scoped>
.cluster-btn{
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 0.48rem;
  box-sizing: border-box;
}
.serveCls{
  padding: 0.48rem 0 !important;
  justify-content: space-around !important;
}
.original-buy,
.sponsor-buy {
  width: 5.3rem;
  // padding: 0 0.2rem;
  background: rgba(248, 88, 89, 1);
  border-radius: 0.6rem;
  font-size: 0.6rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 1.2rem;
  height: 1.2rem !important ;
  text-align: center;
}
.sponsor-buy {
  background: rgba(0, 120, 255, 1);
  margin-left: 0.44rem;
}
.cluster-wrapper {
  width: 100%;
  padding: 0.3rem 0.48rem;
  box-sizing: border-box;
  background: #fff;
  .cluster-title {
    p {
      font-size: 0.52rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(68, 68, 68, 1);
      line-height: 0.92rem;
    }
  }
  .unfold-alll {
    width: 100%;
    font-size: 0.48rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(24, 131, 247, 1);
    line-height: 0.96rem;
    text-align: center;
  }
}
.container {
  .btn-fixed {
    position: fixed;
    right: 3.2%;
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 50%;
    background-size: 100% 100%;
    z-index: 99;
    background-repeat: no-repeat;
  }
  .to-home {
    background-image: url("../../assets/1-底部icon/2商城.png");
    bottom: 3.5rem;
    background-color: rgba(0, 0, 0, 0.6);
    background-size: 0.6rem 0.6rem;
    background-position: 50% 30%;
    color: #dfdfdf;
    font-size: 0.35rem;
    text-align: center;
    padding-top: 1rem;
  }
  .to-cart {
    background-image: url("../../assets/new-icon/购物车.png");
    bottom: 6rem;
  }
  .item-viewer {
    width: 100%;
    // height: 15rem;
    position: relative;

    .top-info {
      z-index: 99;
      position: absolute;
      display: inline-block;
      background: rgba(0, 0, 0, 0.4);
      height: 0.96rem;
      border-radius: 0.48rem;
      font-size: 0.48rem;
      color: #fff;
      line-height: 0.96rem;
      left: 0.48rem;
      top: 0.48rem;
      padding-left: 1rem;
      padding-right: 0.2rem;

      img {
        position: absolute;
        width: 0.84rem;
        height: 0.84rem;
        left: 0.1rem;
        top: 0.05rem;
      }
    }

    .share-btn {
      z-index: 99;
      position: absolute;
      right: 0.48rem;
      top: 0.48rem;
      background: none;
      border: none;
      height: 0.96rem;
      width: 0.96rem;
      background-image: url("../../assets/商品详情-图片-assets/fx.png");
      background-size: 100% 100%;
    }

    .video {
      height: 100%;
      background: #000;
    }

    .bottom-btn {
      display: flex;
      width: 100%;
      position: absolute;
      bottom: 1.5rem;
      justify-content: center;
      z-index: 99;

      .video-btn {
        background: none;
        background-image: url("../../assets/new-icon/视频灰色.png");
        background-position: 0 0rem;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border: none;
      }

      button {
        height: 0.72rem;
        width: 1.64rem;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 0.08rem;
        color: rgba(68, 68, 68, 1);
        font-size: 0.44rem;
        border: none;
        padding: 0;
        margin: 0 0.36rem;

        img {
          width: 0.2rem;
          height: 0.32rem;
        }
      }

      .active {
        background-image: none;
        background: linear-gradient(
          225deg,
          rgba(255, 96, 53, 1),
          rgba(253, 123, 96, 1)
        );
        color: #fff;
      }
    }

    .slider-counter {
      z-index: 99;
      position: absolute;
      bottom: 0.48rem;
      right: 0.48rem;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 0.12rem;
      padding: 0.12rem 0.48rem;
      color: #fff;
      font-size: 0.48rem;
    }
    .seckill-tip {
      width: 100%;
      height: 1.2rem;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 50;
      padding: 0 0.48rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      span {
        margin: 0 0.15rem;
      }
      .time-limit {
        line-height: 1.2rem;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.44rem;
      }
      .price {
        font-weight: 500;
        font-size: 0.5rem;
        color: #fff;
        line-height: 1.2rem;
      }
      .buy-limit {
        font-size: 0.32rem;
        line-height: 0.32rem;
        color: red;
        padding: 0.1rem 0.2rem;
        background: rgba(255, 255, 255, 0.5);
      }
      .count-down {
        font-size: 0.48rem;
        line-height: 1.2rem;
        color: #fff;
      }
    }
  }

  .item-title {
    background: #fff;
    padding: 0 3.2%;

    .title-cell {
      display: flex;
      justify-content: space-between;

      .item-title {
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        font-size: 0.64rem;
        padding: 0;
        margin: 0.7rem 0 0.2rem;
        width: 80%;
      }

      button {
        text-align: center;
        margin-top: 0.5rem;
        background: rgba(245, 245, 245, 1);
        border: none;
        color: rgba(153, 153, 153, 1);
        font-size: 0.48rem;
        border-radius: 0.12rem;
        height: 1.12rem;
        width: 2.5rem;
        line-height: 1.12rem;
        // padding: 0 0.24rem;

        img {
          height: 0.64rem;
          width: 0.64rem;
          vertical-align: middle;
        }
      }

      .price {
        display: flex;
        line-height: 2rem;

        .vip-price {
          font-weight: bold;
          color: rgba(244, 67, 73, 1);
          font-size: 0.64rem;

          .vip-tag {
            color: rgba(255, 255, 255, 1);
            font-size: 0.4rem;
            background: rgba(244, 67, 73, 1);
            border-radius: 0.12rem;
            padding: 0 0.1rem;
          }
        }

        .normal-price {
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
          font-size: 0.56rem;
          margin-right: 0.24rem;
          text-decoration: line-through;
          margin-left: 10px;
        }
      }

      .zhekou {
        color: #f43349;
        font-size: 0.48rem;
      }
      .info {
        line-height: 2rem;
        color: rgba(153, 153, 153, 1);
        font-size: 0.48rem;
      }
    }
    .point-price {
      color: #f43349;
      font-size: 0.52rem;
      padding-bottom: 0.6rem;
    }
  }

  .cell {
    padding: 0.5rem 3.2%;
    display: flex;
    font-size: 0.64rem;
    color: rgba(68, 68, 68, 1);
    background: #fff;
    position: relative;

    .cell-btn {
      position: absolute;
      right: 3.2%;
      top: 0.5rem;
      color: #999999;

      img {
        height: 0.64rem;
        width: 0.36rem;
        vertical-align: middle;
      }
    }
  }

  .buyer-info {
    background: #fff;
    margin-top: 0.48rem;
    overflow: hidden;
    .cell {
      .header {
        color: rgba(153, 153, 153, 1);
        margin-right: 3.2%;
      }

      .location {
        img {
          width: 0.52rem;
          height: 0.64rem;
          vertical-align: middle;
          margin-right: 0.24rem;
        }
      }

      .divider {
        color: rgba(233, 233, 233, 1);
        margin: 0 0.56rem;
      }

      .red {
        color: #f85859;
      }

      .coupon-list {
        max-height: 0.96rem;
        .coupon-header {
          display: inline-block;
          height: 0.96rem;
          line-height: 0.96rem;
          background: rgba(255, 110, 80, 0.1);
          border-radius: 0.48rem;
          color: rgba(248, 88, 89, 1);
          font-size: 0.58rem;
          border: 1px solid rgba(248, 88, 89, 1);
          padding: 0 0.4rem;
        }

        .coupon {
          display: inline-block;
          height: 0.96rem;
          line-height: 0.96rem;
          color: rgba(248, 88, 89, 1);
          border: 1px solid rgba(248, 88, 89, 1);
          padding: 0 0.4rem;
          margin: 0.3rem 0.2rem 0.1rem;
          border-radius: 0.1rem;
        }
      }
    }
  }

  .service-size {
    margin-top: 0.48rem;

    .cell {
      .header {
        font-size: 0.58rem;
        margin-right: 3.2%;
      }

      .service {
        font-size: 0.58rem;

        img {
          vertical-align: middle;
        }
      }

      .size {
        font-size: 0.58rem;
        color: #999999;
      }
    }
  }

  .brand-info {
    margin-top: 0.48rem;
    display: flex;
    position: relative;
    padding: 0.4rem 3.2%;
    background: #fff;

    img {
      width: 2.4rem;
      height: 2.4rem;
      margin-right: 3.2%;
    }

    .brand-name {
      .name {
        color: rgba(68, 68, 68, 1);
        font-size: 0.64rem;
        margin: 0.25rem 0;
      }

      .inventory {
        color: rgba(153, 153, 153, 1);
        font-size: 0.58rem;
      }
    }

    .brand-btn {
      position: absolute;
      color: rgba(68, 68, 68, 1);
      font-size: 0.48rem;
      border: 1px solid rgba(233, 233, 233, 1);
      background: none;
      padding: 0.2rem 0.44rem;
      right: 3.2%;
      top: 0.5rem;
    }
  }

  .notice {
    border-left: 0.24rem solid rgba(0, 120, 255, 1);
    padding-left: 0.4rem;
  }

  .item-detail {
    margin-top: 0.48rem;

    .detail-tab {
      background: #fff;
      height: 1.2rem;
      display: flex;
      justify-content: center;
      color: rgba(68, 68, 68, 1);
      font-size: 0.58rem;

      .nav-cell {
        width: 5rem;
        text-align: center;
        margin: 0.3rem 1.34rem 0;
        transition-duration: 0.1s;

        span {
          transition-duration: 0.2s;
          display: inline-block;
          height: 0.8rem;
        }
      }

      .active {
        font-weight: bold;
        font-size: 0.64rem;

        span {
          border-bottom: 0.24rem solid rgba(0, 120, 255, 1);
        }
      }
    }

    .tab-fixed {
      position: fixed !important;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 99;
    }

    .good-params {
      background: #fff;
      padding: 0.48rem 3.2%;

      .params-cell {
        display: flex;
        padding: 0 3.2%;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 0.64rem;
        border-bottom: 1px solid #dfdfdf;

        .key {
          width: 25%;
          color: #999999;
          border-right: 1px solid #dfdfdf;
        }

        .value {
          width: 70%;
          color: #444444;
          padding-left: 5%;
        }
      }

      .params-cell:nth-last-child(1) {
        border-bottom: none;
      }
    }

    .content {
      background: #fff;
      padding: 0.48rem 3.2%;
      font-size: 0.48rem;
    }

    .comment-cell {
      color: rgba(68, 68, 68, 1);
      font-size: 0.58rem;
      background: #fff;
      margin-bottom: 0.48rem;
      padding: 0 3.2%;
      overflow: hidden;

      .top-bar {
        display: flex;
        justify-content: space-between;
        margin: 0.6rem 0 0.2rem;

        .left {
          display: flex;

          img {
            width: 1.2rem;
            height: 1.2rem;
            margin-right: 0.4rem;
            border-radius: 50%;
          }

          .user-info {
            .time {
              font-size: 0.48rem;
              color: #999999;
            }
          }
        }

        .right {
          font-size: 0.64rem;

          img {
            height: 0.6rem;
            width: 0.6rem;
            // vertical-align: middle;
          }
        }
      }

      .comment-img {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0.5rem 0;

        .img {
          width: 4.56rem;
          height: 4.56rem;
          background-color: #dfdfdf;
          margin: 0.1rem 0;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .reply {
        .title {
          font-size: 0.58rem;
          color: #888;
        }
        .content {
          font-size: 0.58rem;
        }
      }
    }
  }

  .bottom-bar {
    display: flex;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #fff;

    button {
      border: none;
      font-size: 0.64rem;
      color: #fff;
      height: 2rem;
      transition-duration: 0.2s;
    }

    .cart-btn {
      width: 2rem;
      height: 2rem;
      background: none;
      font-size: 0.4rem;
      color: #999999;
      position: relative;

      .dot {
        position: absolute;
        font-size: 0.48rem;
        background: rgba(248, 88, 89, 1);
        border-radius: 50%;
        width: 0.58rem;
        height: 0.58rem;
        line-height: 0.58rem;
        color: #fff;
        right: 0.3rem;
        top: 0.2rem;
      }
    }

    img {
      height: 0.8rem;
      width: 0.8rem;
    }

    .buy {
      width: 50%;
      background: rgba(248, 88, 89, 1);
    }

    .share {
      width: 50%;
      background: rgba(0, 120, 255, 1);
    }
  }

  .vip-notice {
    z-index: 999;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    text-align: center;

    .notice-panel {
      height: 10rem;
      width: 85%;
      margin: auto;
      background-color: #fff;
      border-radius: 0.4rem;
      margin-top: 25vh;
      position: relative;
      padding-top: 3rem;
      text-align: center;

      .main-text {
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        font-size: 0.64rem;
        margin: 0.8rem 0;
      }

      .sub-text {
        color: rgba(153, 153, 153, 1);
        font-size: 0.58rem;
      }

      .img {
        position: absolute;
        width: 6rem;
        height: 4.4rem;
        left: calc(50% - 3.3rem);
        top: -1.5rem;
        background-image: url("../../assets/new-icon/成为会员.png");
        background-size: contain;
      }

      button {
        height: 1.6rem;
        width: 74%;
        border-radius: 0.24rem;
        background: rgba(0, 132, 255, 1);
        color: #fff;
        font-size: 0.64rem;
        margin-top: 0.8rem;
        border: none;
      }
    }

    .close {
      width: 1.2rem;
      height: 1.2rem;
      border: none;
      background: #dfdfdf;
      background-image: url("../../assets/new-icon/关闭 (1).png");
      background-size: 100% 100%;
      padding: 0;
      border-radius: 50%;
      margin-top: 0.8rem;
    }
  }
  .arrow-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    text-align: right;
    z-index: 99999;
    img {
      margin-right: 9%;
    }
  }
}
</style>
